import React, { useEffect, useRef } from 'react';
// Import Zone.js required by Angular
import 'zone.js';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const AngularWrapper: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      // Create a container for Angular component
      const angularContainer = document.createElement('div');
      angularContainer.id = 'angular-app';
      
      // Add a custom element to host the Angular component
      const componentElement = document.createElement('hello-angular');
      angularContainer.appendChild(componentElement);
      
      // Clear any existing content and append the new container
      containerRef.current.innerHTML = '';
      containerRef.current.appendChild(angularContainer);

      // Bootstrap the Angular application
      platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.error('Angular bootstrap error:', err));
    }

    // Cleanup function
    return () => {
      // This is a simplified cleanup
      // In a real-world scenario, you would properly destroy the Angular app
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      className="angular-wrapper"
      style={{
        width: '100%',
        minHeight: '200px',
        padding: '10px',
      }}
    >
      {/* Angular app will be rendered here */}
      <div style={{ textAlign: 'center', color: '#666' }}>Loading Angular component...</div>
    </div>
  );
};

export default AngularWrapper;